<template>
	<view class="container">
		<view class="tui-top">
			<tui-list-cell :unlined="true" @click="href(1)">
				<view class="tui-message-item">
					<view class="tui-title-box">
						<view class="tui-icon-box tui-bg-blue"><tui-icon name="message" color="#fff" :size="30"></tui-icon></view>
						<view class="tui-title">系统通知</view>
					</view>
					<tui-badge v-if="unreadList.userNotifyUnreadNum" :position="false" type="red" :scale="false">{{ unreadList.userNotifyUnreadNum || 0 }}</tui-badge>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="href(2)">
				<view class="tui-message-item">
					<view class="tui-title-box">
						<view class="tui-icon-box tui-bg-danger"><tui-icon name="kefu" color="#fff" :size="26"></tui-icon></view>
						<view class="tui-title">个人消息</view>
					</view>
					<tui-badge v-if="unreadList.userMessageUnreadNum" :position="false" type="red" :scale="false">{{ unreadList.userMessageUnreadNum || 0 }}</tui-badge>
				</view>
			</tui-list-cell>
	<!-- 		<tui-list-cell @click="href(3)">
				<view class="tui-message-item">
					<view class="tui-title-box">
						<view class="tui-icon-box tui-bg-warning"><tui-icon name="transport" color="#fff" :size="28"></tui-icon></view>
						<view class="tui-title">发货通知</view>
					</view>
					
				</view>
			</tui-list-cell> -->
		</view>
	</view>
</template>

<script>
import { unreadList } from '@/service/notify.js';
export default {
	data() {
		return { unreadList: {} };
	},
	onShow() {
		this.getUnreadList();
	},
	methods: {
		async getUnreadList() {
			this.unreadList = await unreadList();
		},
		href(type) {
			if (type == 1) {
				uni.navigateTo({
					url: 'list?type=notice'
				});
			} else if (type == 2) {
				uni.navigateTo({
					url: 'list?type=user'
				});
			} else {
				this.tui.toast('敬请期待~');
			}
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 20rpx 0 48rpx;

	.tui-message-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		box-sizing: border-box;

		.tui-title {
			font-size: $uni-font-size-lg;
		}

		.tui-sub-title {
			font-size: $uni-font-size-sm;
			color: $uni-text-color-grey;
			padding-top: 4rpx;
		}

		.tui-title-box {
			display: flex;
			align-items: center;
			justify-content: center;

			.tui-icon-box {
				width: 88rpx;
				height: 88rpx;
				color: $uni-text-color-inverse;
				border-radius: $uni-border-radius-lg;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: $uni-spacing-row-base;
			}

			.tui-bg-danger {
				background-color: $uni-color-error;
			}

			.tui-bg-warning {
				background-color: $uni-color-warning;
			}

			.tui-bg-success {
				background-color: $uni-color-success;
			}

			.tui-bg-primary {
				background-color: $uni-color-primary;
			}

			.tui-bg-pink {
				background-color: #bc50ff;
			}

			.tui-bg-blue {
				background-color: $uni-color-primary;
			}
		}
	}

	.tui-top {
		margin-top: 20rpx;
	}
}
</style>
